<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="https://gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>子组件向父组件传值 &middot; 我的博客</title>
  <meta name="description" content="" />

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-06 ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       年轻是我们唯一拥有权力去编织梦想的时光 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>子组件向父组件传值</h1>
  <time datetime=0001-01-01T00:00:00Z class="post-date">Mon, Jan 1, 0001</time>
  <h2 id="vue子组件向父组件传值thisemit方法">Vue子组件向父组件传值（this.$emit()方法）</h2>
<h3 id="首先需要在父组件中引入子组件">首先，需要在父组件中引入子组件</h3>
<pre><code>&lt;script&gt;
import myheaders from &quot;./myheader&quot;;
&lt;/script&gt;
</code></pre><h3 id="注册组件并调用">注册组件并调用</h3>
<pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;myheaders v-on:update=&quot;receive&quot;&gt;&lt;/myheaders&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
    //   注册组件
    components: {
        myheaders: myheaders,
     }
}
&lt;/script&gt;
</code></pre><h3 id="子组件向父组件传值">子组件向父组件传值</h3>
<h5 id="1在子组件中使用thisemitfunctionparamfunction为父组件定义函数param为传递参数可多个">1.在子组件中使用this.$emit(&lsquo;function&rsquo;,param)，function为父组件定义函数，param为传递参数(可多个)</h5>
<pre><code>created:function(){
    this.$emit('transmit',val1,val2);
}
</code></pre><h5 id="2在父组件中子组件调用处绑定函数v-onfunctionfunction1function为子组件thisemitfunctionparam中的functionfunction1可再次定义">2.在父组件中子组件调用处绑定函数v-on:function=&quot;function1&rdquo;（function为子组件this.$emit(&lsquo;function&rsquo;,param)中的function，function1可再次定义）</h5>
<pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;myheaders v-on:function=&quot;function1&quot;&gt;&lt;/myheaders&gt;
    &lt;/div&gt;
&lt;/template&gt;
</code></pre><h5 id="3在父组件中添加函数function1">3.在父组件中添加函数function1</h5>
<pre><code>&lt;!-- val1,val2为接收到的子组件参数 --&gt;
function1:function(val1,val2){
    &lt;!-- 赋值 --&gt;
    this.data1 = val1
    this.data2 = val2
}
</code></pre>
</div>


    </main>

    
      
    
  </body>
</html>
